<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap图文混排与滚动监听</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
</head>
<style>
    main {
        margin: 1%;
        padding: 10% 20%;
    }
</style>

<body>

    <main>
        <div class="media">
            <img src="../img/back.jpg" alt="" class="w-25  align-self-center">
            <div class="media-body pl-5 pt-3">
                <h4>标题</h4>
                <p>media的文本信息</p>
            </div>
        </div>

        <ul class="list-unstyled">
            <li class="media">
                <img src="../img/back.jpg" alt="" class="w-25  align-self-center">
                <div class="media-body pl-5 pt-3">
                    <h4>标题</h4>
                    <p>media的文本信息</p>
                </div>
            </li>
            <li class="media">
                <img src="../img/back.jpg" alt="" class="w-25  align-self-center">
                <div class="media-body pl-5 pt-3">
                    <h4>标题</h4>
                    <p>media的文本信息</p>
                </div>
            </li>
            <li class="media">
                <img src="../img/back.jpg" alt="" class="w-25  align-self-center">
                <div class="media-body pl-5 pt-3">
                    <h4>标题</h4>
                    <p>media的文本信息</p>
                </div>
            </li>
            <li class="media">
                <img src="../img/back.jpg" alt="" class="w-25  align-self-center">
                <div class="media-body pl-5 pt-3">
                    <h4>标题</h4>
                    <p>media的文本信息</p>
                </div>
            </li>
            <li class="media">
                <img src="../img/back.jpg" alt="" class="w-25  align-self-center">
                <div class="media-body pl-5 pt-3">
                    <h4>标题</h4>
                    <p>media的文本信息</p>
                </div>
            </li>
        </ul>

        <nav id="mynav" class="navbar navbar-light bg-light">
            <a href="#" class="navbar-brand">navbar</a>
            <ul class="nar nav-pills">
                <li class="nav-item"><a href="#one" class="nav-link">一</a></li>
                <li class="nav-item"><a href="#two" class="nav-link">二</a></li>
                <li class="nav-item"><a href="#three" class="nav-link">三</a></li>
            </ul>

        </nav>
            <div data-spy="scroll" data-target="#mynav" data-offset="0" style="height: 300px;overflow:scroll;position:relative;">
                <h4 id="one">一</h4>
                <p>....................1</p>
                <p>....................1</p>
                <p>....................1</p>
                <p>....................1</p>
                <h4 id="two">二</h4>
                <p>....................2</p>
                <p>....................2</p>
                <p>....................2</p>
                <p>....................2</p>
                <p>....................2</p>
                <p>....................2</p>
                <p>....................2</p>
                <h4 id="three">三</h4>
                <p>....................3</p>
                <p>....................3</p>
                <p>....................3</p>
                <p>....................3</p>
                <p>....................3</p>
                <p>....................3</p>
                <p>....................3</p>
                <p>....................3</p>
                <p>....................3</p>
                <p>....................3</p>
                <p>....................3</p>
            </div>

        <div class="row">
            <div class="col">
                <div class="list-group" id="abc">
                    <a href="#aaa" class="list-group-item list-group-item-action">aaa</a>
                    <a href="#bbb" class="list-group-item list-group-item-action">bbb</a>
                    <a href="#ccc" class="list-group-item list-group-item-action">ccc</a>
                </div>
            </div>
            <div class="col">
                <div data-spy="scroll" data-target="#abc" data-offset="0" style="overflow: scroll; height: 300px;">
                    <h4 id="aaa">aaa</h4>
                    <p>aaa..................</p>
                    <p>aaa..................</p>
                    <p>aaa..................</p>
                    <p>aaa..................</p>
                    <p>aaa..................</p>
                    <p>aaa..................</p>
                    <h4 id="bbb">bbb</h4>
                    <p>bbb..................</p>
                    <p>bbb..................</p>
                    <p>bbb..................</p>
                    <p>bbb..................</p>
                    <p>bbb..................</p>
                    <p>bbb..................</p>
                    <h4 id="ccc">ccc</h4>
                    <p>ccc..................</p>
                    <p>ccc..................</p>
                    <p>ccc..................</p>
                    <p>ccc..................</p>
                    <p>ccc..................</p>
                    <p>ccc..................</p>
                </div>
            </div>
        </div>

    </main>

    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.bundle.min.js"></script>
</body>

</html>